<template>
	<view class="warp">
		<view class="addtask_header">
			<view>发布指标任务，3步即可</view>
		</view>
		<view class="steps">
			<view class="cricle">
				<view class="task_one comm" v-if="num<1">1</view>
				<view class="task_active comm" v-if="num>=1">1</view>
				<view class="title" v-if="num<1">设置任务信息</view>
				<view class="title_active" v-if="num>=1">设置任务信息</view>
			</view>
			<view class="line"></view>
			<view class="cricle">
				<view class="task_tow comm" v-if="num<2">2</view>
				<view class="task_tow_active comm" v-if="num>=2">2</view>
				<view class="title" v-if="num<2">设置任务指标</view>
				<view class="title_active" v-if="num>=2">设置任务指标</view>
			</view>
			<view class="line"></view>
			<view class="cricle">
				<view class="task_three comm" v-if="num<3">3</view>
				<view class="task_three_active comm" v-if="num>=3">3</view>
				<view class="title" v-if="num<3">下发任务</view>
				<view class="title_active" v-if="num>=3">下发任务</view>
			</view>
		</view>
		<!-- 任务信息 -->
		<view class="form" v-if="num==1">
			<uni-forms :modelValue="form"  label-width ="260" label-position="left" :border="false">
				<uni-forms-item label="任务标题" name="taskName" >
					<input  v-model="form.taskName"  type="text" placeholder="请输入任务标题">
				</uni-forms-item>
				<uni-forms-item label="任务对象" name="taskName" >
					<input @click="tomarketer" v-model="form.executorListName"   :class="{ 'disabled': true }" type="text" placeholder="请选择任务对象">
				</uni-forms-item>
				<uni-forms-item label="任务周期" name="taskName" label-position="top">
					<view class="">
						<view class="list">
							<view @click="changetimet(index)"  :class="numt==index?'active':'item'" v-for="(item,index) in timec" :key="index">
								{{item.name}}
							</view>
							
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="任务开始时间" name="taskName"  v-if="numt==0" >
					<uni-datetime-picker :border="false" type="datetime" v-model="form.startTime"  />
						<!-- <input @click="showfn" v-model="form.startTime" style="margin-left: 10%;" :class="{ 'disabled': true }"  type="text" placeholder="请选择开始时间"> -->
				</uni-forms-item>
				<uni-forms-item label="任务结束时间" name="taskName" v-if="numt==0">
					<uni-datetime-picker :border="false" type="datetime" v-model="form.endTime" />
					<!-- <input @click="showend=true" v-model="form.endTime" style="margin-left: 10%;" :class="{ 'disabled': true }" type="text" placeholder="请选择结束时间"> -->
				</uni-forms-item>
				</uni-forms>
			
		</view>
		<!-- 任务指标 -->
		<view class="toast" v-if="num==2">
			请添加指标后进行任务目标及奖励规则的设置
		</view>
		<view class="taskindictor" v-if="num==2">
			
			<view class="list">
				<view class="item" v-for="(item,index) in form.indexInfoList" :key="index">
				<view class="top_item">
					<view class="left_t">
						{{item.indexTitle}}
					</view>
					<view class="right_t">
						<uni-icons @click="deletefn(index)" type="clear" color="#cecece" size="30rpx"></uni-icons>
					</view>
				</view>
				<view class="bottom_item">
					<span style="margin-right: 10rpx;">考核目标:</span>
					<span style="display: inline-block;width: 100rpx;border-bottom: 2rpx solid #cecece;">	<input @blur="blurfn"  v-model="item.indexNum" style=""  type="text" ></span>
				    <span style="margin-left: 10rpx;">个</span>
				</view>
				</view>
			</view>
			<view class="additem" @click="addinto">
				<uni-icons type="plusempty" size="40rpx"></uni-icons>
			   <span style="margin-left: 20rpx;">添加指标项目</span>
			</view>
		</view>
		<view class="submit" v-if="num==3">
			<uni-card>
			<view class="conment">
				<view class="title">
				{{form.taskName}}
				</view>
				<view class="pople">
					<span style="font-size: 30rpx;color: #282828;">执行对象：</span>
					<uni-icons style="margin-right: 20rpx;" type="staff" color="#999999" size="30rpx"></uni-icons>
				     {{form.executorListName}}
				</view>
				<view class="time">
					<span style="font-size: 30rpx;color: #282828;">时间：</span>
					<uni-icons style="margin-right: 25rpx;" type="notification" color="#999999" size="30rpx"></uni-icons>
				     <span v-if="form.taskModel==0">
						 {{form.startTime}}___{{form.endTime}}
					 </span>
					<span v-if="form.taskModel==1">每日</span>
					<span v-if="form.taskModel==2">每周</span>
					<span v-if="form.taskModel==3">每月</span>
						 
				</view>
			</view>
			</uni-card>
			<view class="list">
				<view class="item" v-for="(item,index) in form.indexInfoList">
					<view class="left">
						{{item.indexTitle}}
					</view>
					<view class="right">
						<span>每人完成 </span>
					<span style="color: #fd4954;">	{{item.indexNum}}</span>
						次
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" v-if="num>2" @click="submit">
				开启任务
			</view>
			<view v-if="num<3" class="btn" @click="indexNum">
				下一步
			</view>
			
			<view v-if="num>1" style="margin-top: 10rpx;background-color: #fff;color: #282828;border: 2rpx solid #282828;" class="btn" @click="backnum">
		       上一步
			</view>
		</view>
		<view style="padding-bottom: 80%;">
		</view>
		<!-- <u-picker @confirm="choosestarttime" :params="params" start-year="2023" :default-time="newTime" mode="time" v-model="show"></u-picker> -->
	    <!-- <u-picker @confirm="chooseendtime" :params="params" start-year="2023" :default-time="form.startTime?form.startTime:newTime" mode="time" v-model="showend"></u-picker> -->
	<!-- 提示 -->
	<!-- <u-toast ref="uToast"></u-toast> -->
	</view>
</template>

<script>
	import moment from "moment"
	import uniDatetimePicker from "../uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue"
	import uniForms from "../uni-forms/components/uni-forms/uni-forms.vue"
	 import uniFormsItem from "../uni-forms/components/uni-forms-item/uni-forms-item.vue"
	 import uniCard from "../uni-card/uni-card.vue"
	import {
			mapState,
			mapMutations,
			
		} from 'vuex'
	export default{
		components:{
			uniDatetimePicker,
			uniForms,
			uniFormsItem,
			uniCard
		},
		data(){
			return{
				num:1,
				numt:0,
				form:{
					
					taskModel:0,
					taskName:'',
					executorListName:null,
					executorList:[],
					indexInfoList:[],
					startTime:'',
					endTime:'',
					storeId:'',
					status:'0'
				},
				timec:[ 
					{
						name:'阶段性'
					},
					{
						name:'每日'
					},
					{
						name:'每周'
					},
					{
						name:'每月'
					},
				],
				params: {
									year: true,
									month: true,
									day: true,
									hour: true,
									minute: true,
									second: true
								},
				show:false,
				newTime:null,
				showend:false,
				indictorlist:[],
				changnum:null,
			 
  
				
			}
		},
		onLoad() {
			 setTimeout(()=>{
					    uni.setNavigationBarTitle({
					  			   title: this.$L('新增任务')
					  			});
					  },0);
		this.newTime=moment().format("YYYY-MM-DD HH:mm:ss")
		console.log(this.newTime);
		console.log(this.form);
		},
		onBackPress() {
			// this.getValueS()
		},
		computed: {
					...mapState(['hasLogin', 'userInfo', 'userCenterData']),
					},
		methods:{
			// 打开时间选择器
			showfn(){
				console.log(111);
				this.show=true
			},
			//接收值
		getValueS(val){
			if(val.type=='marketer'){
				 if(val.list.length!=0){
					this.form.executorList=val.list
					this.form.executorListName=null
					 val.list.forEach(item=>{
						
					 	if(this.form.executorListName==null){
							this.form.executorListName=item.userName
						}else{
							this.form.executorListName=this.form.executorListName+','+item.userName
						}
					 })
				 }
				
				
			}else if(val.type=="inditor"){
	         this.indictorlist.push(val.item)
				this.form.indexInfoList.push({indexId:val.item.id,indexNum:val.item.indexNum,indexTitle:val.item.bigTitle})
				
			}
		},
		// 
		blurfn(){
		console.log(this.form);
			
		},
		
		// 选择时间
		choosestarttime(val){
			console.log(val);
			this.form.startTime=val.year+'-'+val.month+'-'+val.day+' '+val.hour+':'+val.minute+':'+val.second
			
			 
		},
		chooseendtime(val){
			this.form.endTime=val.year+'-'+val.month+'-'+val.day+' '+val.hour+':'+val.minute+':'+val.second
		},
		// 删除指标
		deletefn(val){
			this.form.indexInfoList.splice(val,1)
		},
		// 提交表单
		submit(){
			//检验
			// 提交
			this.form.storeId=this.userCenterData.memberId
			// this.form.executorList.push({userName:this.$store.state.vuex_username,userId:this.$store.state.vuex_userId})
		    this.$request({
				url:'v3/task/front/appTask',
				method:"POST",
				header:{
				  'Content-Type': 'application/json'
				},
				data:this.form
			}).then(res=>{
				this.form={taskModel:0,
					taskName:'',
					executorListName:null,
					indexInfoList:[],
					startTime:'',
					endTime:'',
					storeId:this.userCenterData.memberId
					},
					this.num=1
					this.numt=0
				uni.navigateTo({
					url:"/extra/task/task"
				})
			})
			
		},
			// 切换时间
			changetimet(idx){
				this.numt=idx
				this.form.taskModel=idx
			},
			// 步骤
			indexNum(){//||this.form.executorList.length==0
			let indexnum=true
			this.form.indexInfoList.forEach(item=>{
				if(!item.indexNum){
					indexnum=false
				}
			})
				if(this.num==1){
					if(this.form.taskName==''){
					     uni.showToast({
					     	title:'请完善信息',
							icon:"none"
					     })
					}else if(this.form.executorList.length==0){
						uni.showToast({
							title:'请完善信息',
							icon:"none"
						})
					}else{
						if(this.form.taskModel!=0){
							this.num+=1
						}else{
							if(this.form.startTime==''||this.form.endTime==""){
								uni.showToast({
									title:'请完善信息',
									icon:"none"
								})
							}else{
								this.num+=1
							}
						}
					}
				}else if(this.num==2){
					console.log(indexnum);
					if(this.form.indexInfoList.length==0 || !indexnum){
						uni.showToast({
							title:'请完善信息',
							icon:"none"
						})
					}else{
						this.num+=1
					}
				}
				
			},
			backnum(){
				this.num-=1
			},
			tomarketer(){
				uni.navigateTo({
					url:"/standard/chooosemakter/chooosemakter"
				})
			},
			// 添加任务指标
			addinto(){
				
				uni.navigateTo({
					url:"/standard/chooseindictor/chooseindictor?list="+encodeURIComponent(JSON.stringify(this.indictorlist))
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 750rpx;
		margin: 0 auto;
		background: #F5F5F5;
	}
	.warp{
		background-color: #f7f7f7;
		color: #282828;
		font-family: PingFang-SC-Regular;
		.addtask_header{
			padding: 30rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #eee;
			
		}
		.steps{
			background-color: #fff;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			.comm{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 100rpx;
				color: #fff;
				font-size: 40rpx;
			}
			.title{
				font: 28rpx;
				margin-top: 20rpx;
				color: #cccccc;
			}
			.title_active{
				font: 28rpx;
				margin-top: 20rpx;
				font-weight: 550;
			}
			.cricle{
				width: 200rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				 
			}
			.task_one,.task_tow,.task_three{
				background-color: #cccccc;
			}
			.task_active,.task_tow_active,.task_three_active{
				background-color: #feb858;
			}
			.line{
				width: 100rpx;
				height: 90rpx;
				background-color: #fff;
				border-bottom: 4rpx solid #cccccc;
			}
		}
		// 任务信息
		.form{
			padding: 30rpx;
			background-color: #fff;
			.uni-forms-item  {
					display: flex;
					align-items: center;
				}
			.list{
				display: flex;
				.item{
					padding: 5rpx;
					border: 2rpx solid #808080;
					margin-left: 10rpx;
					line-height: 35rpx;
					color: #808080;
				}
				.active{
					padding: 5rpx;
					border: 2rpx solid #eac178;
					margin-left: 10rpx;
					line-height: 35rpx;
					color: #eac178;
				}
			}
		}
		// 任务指标
		.toast{
			padding: 20rpx;
			width: 100%;
			height: 80rpx;
			font-size: 24rpx;
			color: #808080;
			background-color: #f7f7f7;
		}
		.taskindictor{
			.list{
				.item{
					padding: 20rpx;
					background-color: #fff;
					margin-top: 20rpx;
					.top_item{
						display: flex;
						justify-content: space-between;
					}
				}
			}
			.additem{
				padding: 20rpx 30%;
				width: 100%;
				height: 100rpx;
				background-color: #fff;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				
			}
		}
		.submit{
			
			.conment{
				.title{
					font-size: 28rpx;
					font-weight: 550;
					
				}
				.title,.pople,.time{
					margin-bottom: 10rpx;
					font-size: 26rpx;
				}
				
			}
			.list{
				.item{
					background-color: #fff;
					padding: 20rpx 30rpx;
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
				}
			}
		}
		.bottom{
			width: 100%;
			padding: 20rpx 30%;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			.btn{
				width: 300rpx;
				height: 60rpx;
				background-color: #fd4954;
				border-radius: 30rpx;
				color: #fff;
				text-align: center;
				line-height: 60rpx;
			}
		}
	}
	
</style>